<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <link href="https://cdn.bootcss.com/fancybox/3.2.1/jquery.fancybox.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/fancybox/3.2.1/jquery.fancybox.min.js"></script>
    <title>个人信息</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            </button>
            <a class="navbar-brand" href="/"><strong>活动管理系统</strong></a>
        </div>
        <div class="navbar-right">
            <!--/*@thymesVar id="acProve" type="cn.medemede.j2ee.model.AcProve"*/-->
            <p class="navbar-text" th:text="'【学生】 '+(${acProve.getStuName()}?:'')"></p>
            <a class="btn btn-default navbar-btn" href="/j2ee/logout">注销</a>
        </div>
    </div>
</nav>
<div class="page-header" style="width: 400px;text-align: center;margin: 70px auto">
    <h1>个人信息</h1>
</div>

<div>
    <div class="panel panel-default" style="width: 1200px;margin: 20px auto auto auto">
        <!-- Default panel contents -->
        <div class="panel-heading">详细信息</div>
        <div class="panel-body">
            <ul>
                <!--/*@thymesVar id="acProve" type="cn.medemede.j2ee.model.AcProve"*/-->
                <li id="stuId" th:text="'ID: '+(${acProve.getStuId()}?:'')"></li>
                <li th:text="'姓名: '+(${acProve.getStuName()}?:'')"></li>
                <li th:text="'性别: '+(${acProve.getSex()}?:'')"></li>
                <li th:text="'出生日期: '+(${acProve.getBirth()}?:'')"></li>
                <li th:text="'年级: '+(${acProve.getLevel()}?:'')"></li>
                <li th:text="'班级: '+(${acProve.getKlass()}?:'')"></li>
                <li th:text="'入学: '+(${acProve.getStartY()}?:'')+'年'+(${acProve.getStartM()}?:'')+'月'"></li>
                <li th:text="'学校: '+(${acProve.getSchool()}?:'')"></li>
            </ul>
            <a id="showUpdateWindow" href="#updateStu" class="btn btn-info" style="float: right">修改个人信息</a>
        </div>

        <!-- Table -->
        <table class="table table-striped table-hover" style="text-align: center">
            <tr>
                <td><strong>活动序号</strong></td> <td><strong>活动名</strong></td> <td><strong>时间</strong></td>
                <td><strong>时长</strong></td> <td><strong>角色</strong></td> <td><strong>单位</strong></td>
                <td><strong>证明人</strong></td><td>操作</td>
            </tr>
            <!--/*@thymesVar id="acProve" type="cn.medemede.j2ee.model.AcProve"*/-->
            <tr th:each="ac,acStat : ${acProve.getAcList()}">
                <td th:text="${ac.acId}"></td>
                <td th:text="${ac.acName}"></td>
                <td th:text="${ac.acTime}"></td>
                <td th:text="${ac.acHour}"></td>
                <td th:text="${ac.acRole}"></td>
                <td th:text="${ac.acUnit}"></td>
                <td th:text="${ac.witne}"></td>
                <td>
                    <a th:name="${ac.acId}" href="#updateAcWindow" class="btn btn-info ac-update">修改</a>
                    &nbsp;&nbsp;
                    <a th:name="${ac.acId}" class="btn btn-warning ac-delete">删除</a>
                </td>
            </tr>

            <tr>
                <td colspan="8">
                    <a id="showAddAcWindow" href="#addAcWindow" class="btn btn-info">添加活动</a>
                    <a id="showImportAcWindow" href="#importAC" class="btn btn-info">从Excle表导入活动</a>
                    <a class="btn btn-info" th:href="'/j2ee/stuinfo/ac/'+${acProve.getStuId()}">导出Word</a>
                </td>
            </tr>

        </table>
    </div>
</div>

<div class="container" id="addAcWindow" style="display: none">
    <div class="row">
        <div class="panel panel-default" style="width:560px;margin:0 auto auto auto;text-align:center">
            <div class="panel-heading"><h4>添加活动</h4></div>
            <div class="panel-body">
                <br>
                <form id="add_ac_form" action="/j2ee/stuinfo/ac" method="post">
                    <div class="input-group">
                        <span class="input-group-addon">活动名：</span>
                        <input name="acName" type="text" class="form-control">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">时间：</span>
                        <input name="acTime" type="date" class="form-control">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">时长：</span>
                        <input name="acHour" type="text" class="form-control" placeholder="小时">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">角色：</span>
                        <input name="acRole" type="text" class="form-control">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">活动单位：</span>
                        <input name="acUnit" type="text" class="form-control">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">证明人：</span>
                        <input name="witne" type="text" class="form-control">
                    </div>
                    <br>
                    <div>
                        <input class="btn btn-default" type="submit" value="添加">
                    </div>

                    <!--/*@thymesVar id="acProve" type="cn.medemede.j2ee.model.AcProve"*/-->
                    <input type="hidden" name="stuId" th:value="${acProve.getStuId()}">
                </form>
            </div>
        </div>
    </div>
</div>

<div class="container" id="updateAcWindow" style="display: none">
    <div class="row">
        <div class="panel panel-default" style="width:560px;margin:0 auto auto auto;text-align:center">
            <div class="panel-heading"><h4>修改活动</h4></div>
            <div class="panel-body">
                <br>
                <form id="update_ac_form" action="/j2ee/stuinfo/ac" method="post">
                    <div class="input-group">
                        <span class="input-group-addon">活动名：</span>
                        <input name="acName" type="text" class="form-control">
                    </div>
                    <br>
                     <div class="input-group">
                        <span class="input-group-addon">时间：</span>
                        <input name="acTime" type="date" class="form-control">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">时长：</span>
                        <input name="acHour" type="text" class="form-control" placeholder="小时">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">角色：</span>
                        <input name="acRole" type="text" class="form-control">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">活动单位：</span>
                        <input name="acUnit" type="text" class="form-control">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">证明人：</span>
                        <input name="witne" type="text" class="form-control">
                    </div>
                    <br>
                    <div>
                        <input class="btn btn-default" type="submit" value="修改">
                    </div>

                    <!--/*@thymesVar id="acProve" type="cn.medemede.j2ee.model.AcProve"*/-->
                    <input type="hidden" name="stuId" th:value="${acProve.getStuId()}">
                    <input id="acIdHidden" type="hidden" name="acId">
                </form>
            </div>
        </div>
    </div>
</div>

<div class="container" id="updateStu" style="display: none">
    <div class="row">
        <div class="panel panel-default" style="width:560px;margin:0 auto auto auto;text-align:center">
            <div class="panel-heading"><h4>修改个人信息</h4></div>
            <div class="panel-body">
                <br>
                <form id="update_stu_form" action="/j2ee/stuinfo" method="post">
                    <div class="input-group">
                        <span class="input-group-addon">姓名：</span>
                        <input name="stuName" type="text" class="form-control" th:value="(${acProve.getStuName()}?:'')">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">性别：</span>
                        <input name="sex" type="text" class="form-control" th:value="(${acProve.getSex()}?:'')" placeholder="男/女">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">出生日期：</span>
                        <input name="birth" type="date" class="form-control">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">年级：</span>
                        <input name="level" type="text" class="form-control" th:value="(${acProve.getLevel()}?:'')" placeholder="2015级">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">班级：</span>
                        <input name="klass" type="text" class="form-control" th:value="(${acProve.getKlass()}?:'')" placeholder="一班">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">入学年份：</span>
                        <input name="startY" type="text" class="form-control" th:value="(${acProve.getStartY()}?:'')" placeholder="2015">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">入学月份：</span>
                        <input name="startM" type="text" class="form-control" th:value="(${acProve.getStartM()}?:'')" placeholder="09">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">学校：</span>
                        <input name="school" type="text" class="form-control" th:value="(${acProve.getSchool()}?:'')" placeholder="山东农业大学">
                    </div>
                    <br>
                    <div>
                        <input class="btn btn-default" type="submit" value="修改">
                    </div>
                    <!--/*@thymesVar id="acProve" type="cn.medemede.j2ee.model.AcProve"*/-->
                    <input type="hidden" name="stuId" th:value="${acProve.getStuId()}">
                </form>
            </div>
        </div>
    </div>
</div>

<div class="container" id="importAC" style="display: none">
    <div class="row">
        <div class="panel panel-default" style="width:560px;margin:0 auto auto auto;text-align:center">
            <div class="panel-heading"><h4>从Excel表导入活动</h4></div>
            <div class="panel-body">
                <br>
                <form class="navbar-form navbar-left" id="import_ac_excel" action="acExcel" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <input type="file" class="btn btn btn-default navbar-btn" name="ExcelFile">
                    </div>
                    <input class="btn btn-primary navbar-btn" type="submit" value="提交">
                    <!--/*@thymesVar id="acProve" type="cn.medemede.j2ee.model.AcProve"*/-->
                    <input type="hidden" name="stuId" th:value="${acProve.getStuId()}">
                </form>
            </div>
        </div>
    </div>
</div>


<script th:inline="javascript">

    $(document).ready(function () {
        /*弹出框js*/
        $("#showAddAcWindow").fancybox({
            'autoDimensions': false,
            'centerOnScroll': true,
            'scrolling': false
        });
        /*弹出框js*/
        $("#showUpdateWindow").fancybox({
            'autoDimensions': false,
            'centerOnScroll': true,
            'scrolling': false
        });
        /*弹出框js*/
        $("#showImportAcWindow").fancybox({
            'autoDimensions': false,
            'centerOnScroll': true,
            'scrolling': false
        });
        /*弹出框js*/
        $(".ac-update").fancybox({
            'autoDimensions': false,
            'centerOnScroll': true,
            'scrolling': false
        });

        var options1 = {
            success:showResponse1,  // 提交后
            dataType:'json' // 'xml', 'script', or 'json' (接受服务端返回的类型.)
        };
        $('#add_ac_form').ajaxForm(options1);

        $('#update_stu_form').ajaxForm(options1);

        $('#update_ac_form').ajaxForm(options1);

        var options2={
            contentType: false, //必须
            processData: false, //必须
            success:showResponse1,  // 提交后
            dataType:'json' // 'xml', 'script', or 'json' (接受服务端返回的类型.)
        };
       $('#import_ac_excel').ajaxForm(options2);

    });

    $(document).ready(function () {

        /*为修改活动的隐藏项赋值*/
        $(".ac-update").click(function () {
            $("#acIdHidden").val($(this).attr("name"));
        });

        /*删除活动*/
        $(".ac-delete").click(function () {
            var stuId = [[${acProve.stuId}]];
            var acId = $(this).attr("name");
            $.ajax({
                url: "/j2ee/stuinfo/ac",
                type: "post",
                dataType: "json",
                data: {
                    _method: "delete",    //将POST请求转换为DELETE请求
                    stuId: stuId,         //传送的json值
                    acId: acId
                },
                success: function (data) {
                    alert(data.msg);
                    window.location.reload();
                }
            });
        });
    });

    //  提交后
    function showResponse1(responseText, statusText) {
        parent.$.fancybox.close();
        if(statusText==="success"){
            alert(responseText.msg);
        }else {
            alert('提交状态: ' + statusText + '\n\n 返回的内容是: \n' + responseText.msg);
        }
        window.location.reload();
    }

</script>
</body>
</html>